<template>
	<view class="evan-form-show">
		<evan-form :hideRequiredAsterisk="hideRequiredAsterisk" ref="form" :model="curse">
			<evan-form-item label="课程名：" prop="curseName">
				<input class="form-input" v-model="curse.curseName" placeholder-class="form-input-placeholder" placeholder="请输入课程名" />
			</evan-form-item>
			<evan-form-item class="form-label" label="课程开始时间：" prop="starttime">
				<picker mode="date" :value="sDate" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{sDate}}</view>
				</picker>
			</evan-form-item>
			<evan-form-item label="课程结束时间：" prop="endtime">
				<picker mode="date" :value="eDate" :start="startDate" :end="endDate" @change="bindDateChange1">
					<view class="uni-input">{{eDate}}</view>
				</picker>
			</evan-form-item>
			<evan-form-item label="每节课价格：" prop="cursePrice">
				<input type="number" class="form-input" v-model="curse.cursePrice" placeholder-class="form-input-placeholder"
				 placeholder="请输入每节课价格" />
			</evan-form-item>
			<evan-form-item label="该班人数：" prop="curseStudentNum">
				<input type="number" class="form-input" v-model="curse.curseStudentNum" placeholder-class="form-input-placeholder"
				 placeholder="请输入该班最大人数" />
			</evan-form-item>
			<evan-form-item label="课程总节数：" prop="curseCount">
				<input type="number" class="form-input" v-model="curse.curseCount" placeholder-class="form-input-placeholder"
				 placeholder="请输入课程总节数" />
			</evan-form-item>
			<evan-form-item label="课程描述：" prop="curseDesc">
			</evan-form-item>
			<evan-form-item prop="curseDesc">
				<textarea class="form-input" v-model="curse.curseDesc" placeholder-class="form-input-placeholder" placeholder="请输入课程描述"></textarea>
			</evan-form-item>
			<evan-form-item label="课程特色(如有多个,按+号继续输入)：">
				<text class="star">*</text><button size="mini" @click="decreaseCurseFeature">-</button><button size="mini" @click="addCurseFeature">+</button>
			</evan-form-item>
			<evan-form-item>
				<evan-form-item v-for="(curseFeature,index) in curseFeatureList" :key="index">
					<input class="form-input" v-model="curseFeature.curseFeature" placeholder-class="form-input-placeholder"
					 placeholder="如有多个,按+号继续输入" />
				</evan-form-item>
			</evan-form-item>
			<evan-form-item label="适宜人群(如有多个,按+号继续输入)：">
				<text class="star">*</text><button size="mini" @click="decreaseCurseSuitable">-</button><button size="mini" @click="addCurseSuitable">+</button>
			</evan-form-item>
			<evan-form-item>
				<evan-form-item v-for="(curseSuitable,index) in curseSuitableList" :key="index">
					<input class="form-input" v-model="curseSuitable.curseSuitable" placeholder-class="form-input-placeholder"
					 placeholder="如有多个,按+号继续输入" />
				</evan-form-item>
			</evan-form-item>
			<evan-form-item label="课程好处(如有多个,按+号继续输入)：">
				<text class="star">*</text><button size="mini" @click="decreaseCurseBenefit">-</button><button size="mini" @click="addCurseBenefit">+</button>
			</evan-form-item>
			<evan-form-item>
				<evan-form-item v-for="(curseBenefit,index) in curseBenefitList" :key="index">
					<input class="form-input" v-model="curseBenefit.curseBenefit" placeholder-class="form-input-placeholder"
					 placeholder="如有多个,按+号继续输入" />
				</evan-form-item>
			</evan-form-item>
			<evan-form-item label="注意事项(如有多个,按+号继续输入)：">
				<text class="star">*</text><button size="mini" @click="decreaseCurseTip">-</button><button size="mini" @click="addCurseTip">+</button>
			</evan-form-item>
			<evan-form-item>
				<evan-form-item v-for="(curseTip,index) in curseTipList" :key="index">
					<input class="form-input" v-model="curseTip.curseTip" placeholder-class="form-input-placeholder" placeholder="如有多个,按+号继续输入" />
				</evan-form-item>
			</evan-form-item>
			<evan-form-item label="请选择课程类型：" prop="curseCount">
				<picker @change="bindPickerChange" :value="index" :range="courseType">
					<view class="uni-input" style="font: small;">{{courseType[index]}}</view>
				</picker>
			</evan-form-item>
			<evan-form-item label="请选择课程宣传图片：" prop="curseCount">
			</evan-form-item>
			<uImg ref="upimg" :canUploadFile="true" :limit="limitNum" :uploadFileUrl="uploadFileUrl" :heaer="header"
			 :fileKeyName="name" :uImgList.sync="uImgList" @uploadSuccess="uploadSuccess"></uImg>
		</evan-form>
		<button @click="next" class="evan-form-show__button">下一步</button>
	</view>
</template>

<script>
	import EvanForm from '@/components/evan-form/evan-form.vue'
	import EvanFormItem from '@/components/evan-form/evan-form-item.vue'
	import uImg from '@/components/zhtx-uploadImg/zhtx-uploadImg.vue'
	import base from '@/common/base.js'
	let toast = msg => {
		uni.showToast({
			title: msg,
			icon: 'none',
		});
	}
	export default {
		components: {
			EvanForm,
			EvanFormItem,
			uImg
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				curseFeatureList: [{
					curseFeature: ''
				}],
				curseSuitableList: [{
					curseSuitable: ''
				}],
				curseBenefitList: [{
					curseBenefit: ''
				}],
				curseTipList: [{
					curseTip: ''
				}],
				msg: '',
				length: 140,
				limitNum: 1,
				uploadFileUrl: base.urlPrefix + 'yoga_app/curse/coachUploadCurseImg',
				name: 'file', //上传的名字
				header: { // 如果需要header，请上传
				},
				uImgList: '',
				sDate: currentDate,
				eDate: currentDate,
				hideRequiredAsterisk: false,
				index: 0,
				courseType: ['减脂塑形', '身体调理', '气质提升', '减压放松', '孕妇瑜伽'],
				coachId: 0,
				curseId: 1,
				// 表单的内容必须初始化
				curse: {
					coachId: this.coachId,
					curseName: '',
					cursePrice: '',
					curseStudentNum: '',
					curseCount: '',
					curseDesc: '',
					curseFeatures: '',
					curseSuitable: '',
					curseBenefits: '',
					curseTips: '',
					starttime: '',
					endtime: '',
					curseType: ''
				},
				rules: {
					curseName: {
						required: true,
						message: '请输入课程名'
					},
					cursePrice: {
						required: true,
						message: '请输入每节课价格'
					},
					curseStudentNum: {
						required: true,
						message: '请输入课程人数'
					},
					curseCount: {
						required: true,
						message: '请输入课程总节数'
					},
					curseDesc: {
						required: true,
						message: '请输入课程描述'
					}

				}
			}
		},
		onLoad() {
			this.curse.curseType = this.courseType[this.index];
			this.curse.starttime = this.sDate;
			this.curse.endtime = this.eDate;
			// 这里必须放在$nextTick中，不然h5会找不到this.$refs.form
			this.$nextTick(() => {
				this.$refs.form.setRules(this.rules)
			})
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onBackPress(e) {
			uni.showModal({
				content: '退出将清空课程数据，您确定要退出吗？',
				success: (res) => {
					if (res.confirm) {
						uni.switchTab({
							url: "/pages/tabBar/user/user",
							success() {
								let page = getCurrentPages().pop();
								page.onLoad();
							}
						});
					}
				}
			});
			return true;
		},
		methods: {
			addCurseFeature() {
				let curseFeature = {
					curseFeature: ''
				}
				this.curseFeatureList.push(curseFeature);
			},
			decreaseCurseFeature() {
				if (this.curseFeatureList.length > 1) {
					this.curseFeatureList.pop();
				} else {
					toast("课程特色不能为空")
				}
			},
			addCurseSuitable() {
				let curseSuitable = {
					curseSuitable: ''
				}
				this.curseSuitableList.push(curseSuitable);
			},
			decreaseCurseSuitable() {
				if (this.curseSuitableList.length > 1) {
					this.curseSuitableList.pop();
				} else {
					toast("课程适宜人群不能为空");
				}
			},
			addCurseBenefit() {
				let curseBenefit = {
					curseBenefit: ''
				}
				this.curseBenefitList.push(curseBenefit);
			},
			decreaseCurseBenefit() {
				if (this.curseBenefitList.length > 1) {
					this.curseBenefitList.pop();
				} else {
					toast("课程好处不能为空");
				}
			},
			addCurseTip() {
				let curseTip = {
					curseTip: ''
				}
				this.curseTipList.push(curseTip);
			},
			decreaseCurseTip() {
				if (this.curseTipList.length > 1) {
					this.curseTipList.pop();
				} else {
					toast("课程注意事项不能为空");
				}
			},
			uploadSuccess(result) {
				if (result.statusCode == 200) {
					//上传成功的回调处理
					toast('上传成功')
				} else {
					toast('上传失败')
				}
			},
			upFile(curseId) {
				this.$refs.upimg.uploadCurseMessage(curseId)
			},
			next() {
				//判断用户是否输入第一个文本框
				let featureFirstFlag = true;
				let suitableFirstFlag = true;
				let benefitFirstFlag = true;
				let tipFirstFlag = true;
				for (let i = 0; i < this.curseFeatureList.length; i++) {
					if (this.curseFeatureList[i].curseFeature.trim().length > 0) {
						if (featureFirstFlag) {
							this.curse.curseFeatures = this.curseFeatureList[i].curseFeature;
							featureFirstFlag = false;
						} else {
							this.curse.curseFeatures += ("**" + this.curseFeatureList[i].curseFeature);
						}
					}
				}
				for (let i = 0; i < this.curseSuitableList.length; i++) {
					if (this.curseSuitableList[i].curseSuitable.trim().length > 0) {
						if (suitableFirstFlag) {
							this.curse.curseSuitable = this.curseSuitableList[i].curseSuitable;
							suitableFirstFlag = false;
						} else {
							this.curse.curseSuitable += ("**" + this.curseSuitableList[i].curseSuitable);
						}
					}
				}
				for (let i = 0; i < this.curseBenefitList.length; i++) {
					if (this.curseBenefitList[i].curseBenefit.trim().length > 0) {
						if (benefitFirstFlag) {
							this.curse.curseBenefits = this.curseBenefitList[i].curseBenefit;
							benefitFirstFlag = false;
						} else {
							this.curse.curseBenefits += ("**" + this.curseBenefitList[i].curseBenefit);
						}
					}
				}
				for (let i = 0; i < this.curseTipList.length; i++) {
					if (this.curseTipList[i].curseTip.trim().length > 0) {
						if (tipFirstFlag) {
							this.curse.curseTips = this.curseTipList[i].curseTip;
							tipFirstFlag = false;
						} else {
							this.curse.curseTips += ("**" + this.curseTipList[i].curseTip);
						}
					}
				}
				this.$refs.form.validate((res) => {
					if (res) {
						if (featureFirstFlag == true) {
							this.curse.curseFeatures = '';
							toast("课程特色尚未填写完整");
						} else {
							if (suitableFirstFlag == true) {
								this.curse.curseSuitable = '';
								toast("课程适宜人群尚未填写完整");
							} else {
								if (benefitFirstFlag == true) {
									this.curse.curseBenefits = '';
									toast("课程好处尚未填写完整");
								} else {
									if (tipFirstFlag == true) {
										this.curse.curseTips = '';
										toast("课程注意事项尚未填写完整");
									} else {
										if (this.uImgList.length == 0) {
											toast("请选择课程宣传图片");
										} else {
											this.curse.coachId = base.coach.coachId;
											console.log(this.curse);
											uni.request({
												url: base.urlPrefix + 'yoga_app/curse/coachSubmitBasicMessage',
												method: 'POST',
												header: {
													'content-type': 'application/json'
												},
												data: {
													curseJSON: this.curse
												},
												success: (res) => {
													this.curseId = res.data.object;
													this.upFile(this.curseId);
													uni.navigateTo({
														url: "/pages/user/course/editCourseDetail?curseId=" + this.curseId + "&index=" + (-1)
													});
												}
											});
										}
									}
								}
							}
						}
					}
				});
			},
			hideReqired() {
				this.hideRequiredAsterisk = !this.hideRequiredAsterisk
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.sDate = e.target.value;
				this.curse.starttime = this.sDate;
			},
			bindDateChange1: function(e) {
				this.eDate = e.target.value;
				this.curse.endtime = this.eDate;
			},
			bindPickerChange: function(e) {
				this.index = e.target.value;
				this.curse.curseType = this.courseType[this.index];
			}
		}
	}
</script>

<style lang="scss">
	.form-picker-placeholder {
		margin-right: 5rpx;
	}

	.evan-form-show {
		padding: 20rpx 30rpx;

		.form-label {
			margin-top: 30rpx;
		}

		.form-input {
			font-size: 28rpx;
			color: #333;
			text-align: right;
		}

		.form-input-placeholder {
			font-size: 28rpx;
			color: #999
		}

		&__button {
			width: 100%;
			height: 88rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			font-size: 36rpx;
			color: #fff;
			margin-top: 20rpx;
			background-color: #2D87D5;

			&::before,
			&::after {
				border: none;
			}
		}
	}

	.star {
		position: absolute;
		left: 30rpx;
		color: #FF0000;
	}
</style>
